<template>
	<div class="operatingLog" v-loading="operatingLogLoading">
    <el-form ref="searchForm" class="searchForm" label-position="left" inline :model="searchForm" size="mini">
      <el-form-item>
        <p slot="label">水站名称</p>
        <el-select v-model="searchForm.station" placeholder="请选择水站名称" clearable>
            <p v-for="(item, index) of stationList" :key="index">
              <el-option :label="item" :value="item" se></el-option>
            </p>
          </el-select>
      </el-form-item>
      <el-form-item >
        <p slot="label">仪器名称</p>
        <el-input v-model="searchForm.instrument" placeholder="请输入仪器名称"></el-input>
      </el-form-item>
      <el-form-item >
        <p class="searchBtns">
          <el-button class="greenBtn" @click="onSubmit({pageSize: pageSize, pageNum: 1})">筛选</el-button>
          <!-- <el-button class="greenBtn">导出</el-button> -->
        </p>
      </el-form-item>
      
    </el-form>
    <div class="logTable">
      <el-table :data="runtimeRecord.data" border
        style="width: 100%" :header-cell-style="{color: '#666'}"
      >
        <el-table-column
          prop="station"
          label="水站名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="deviceName"
          label="仪器名称及型号"
          align="center">
          <template slot-scope="scope">
           {{scope.row.deviceName}} / {{scope.row.deviceType}}
          </template>
        </el-table-column>
        <el-table-column
          prop="monitor"
          label="监测项目"
          align="center">
        </el-table-column>
        <el-table-column
          prop="totalTime"
          label="运行考核总时数/h"
          align="center">
        </el-table-column>
        <el-table-column
          prop="uselessTime"
          label="无效运行时数/h"
          align="center">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          align="center">
        </el-table-column>
      </el-table>
    </div>
    <myPaging :func="pageUpdate" :total="runtimeRecord.total"></myPaging>
	</div>
</template>
<script>
import {mapActions, mapGetters} from 'vuex'
import myPaging from '@/components/myPaging.vue'
export default {
  name: 'operatingLog',
  data () {
    return {
      msg: 'hello operatingLog!',
      operatingLogLoading: false,
      searchForm: {
        instrument: '',
        station: ''
      },
		}
  },
	methods: {
    ...mapActions([
      'fetchRuntimeRecord'
    ]),
    async onSubmit(pageOption = {pageSize: this.pageSize, pageNum: 1}) {
      this.operatingLogLoading = true
      await this.fetchRuntimeRecord({...this.searchForm, ...pageOption})
      this.operatingLogLoading = false
    },
    pageUpdate(option) {
      this.onSubmit(option)
    },
  },
  created() {
    this.onSubmit()
  },
  computed: {
    ...mapGetters({
      runtimeRecord: 'getRuntimeRecord',
      stationList: 'getStationList',
      
      //分页依赖
      pageSize: 'getPageSize',
    }),
  },
  components: {
    myPaging
  }
}
</script>
<style scoped>
.operatingLog {
  background: #fff;
  min-height: 100%;
  padding: 0 20px;
}
.logTable {
  margin-top: 25px;
}
.searchForm {
  padding-top: 20px;
}
</style>
